iT邦幫忙

2024 iThome 鐵人賽

DAY 9
1
DevOps

全端監控技術筆記---從Sentry到Opentelemetry系列 第 9

Day09--Sentry是如何獲取效能指標(下)---web vitals

  • 分享至 

  • xImage
  •  

前言

再上一篇我們了解到了Sentry是如何接入 React-Router、來在路由組件掛載的時候獲取url,那麼我們下一步就是在路由組件掛載的時候、檢測該url下的網頁性能。

Web Vitals指標

從Sentry的面板就可以看到,它也是透過 Web Vitals 指標來檢測網頁的效能。

Web Vitals 是一組由Google在2020年提出的性能指標,旨在提供一組易於理解且具有普遍適用性的標準,讓開發者和網站所有者更清晰地知道應該優化哪些方面,以衡量網頁的用戶體驗。

而在Sentry的主面板中,我們可以看到它主要紀錄了Web Vitals 中的特定指標:

  • LCP (Largest Contentful Paint)
    • 測量網頁上最大內容元素的呈現時間,反映了主要內容載入的速度。這個指標可以看作「最大元素」加載完成的時間,通常是網頁的圖片、影片或大型文字區塊。
  • FCP (First Contentful Paint)
    • 首次內容繪製,測量從頁面開始載入到瀏覽器呈現出第一個內容元素(如文字、圖片等)的時間。這標誌著用戶開始看到內容的時刻。
  • INP (Interaction to Next Paint)
    • 測量用戶與頁面進行互動(如點擊按鈕)到頁面響應這個互動的時間。它反映了頁面在與用戶交互時的響應速度,能幫助開發者評估頁面的互動性能。
  • CLS (Cumulative Layout Shift)
    • 測量頁面的視覺穩定性,計算頁面載入期間出現的所有意外佈局偏移。它用於評估網頁元素在載入過程中是否出現移動,避免用戶錯點按鈕或連結,提升視覺體驗。
  • TTFB (Time to First Byte)
    • 首字節時間,測量瀏覽器發出網頁請求到接收到第一個字節的時間。TTFB 主要用來評估server side響應速度以及client side網絡狀況。

Self sdk接入web vitals

雖然Google Chrome團隊有開源Web Vitalsnpm,但在Sentry官方的sdk中,可以在packages/browser-utils/src/metrics看到Sentry是自己實現了對web-vitals指標的獲取(不過應該是把官方的npm直接複製下來做二次開發,以保證版本穩定)。

不過今天的Demo還是用Google Chrome官方的npm套件來處理,使用onLCP onFCP 來獲取LCPFCP這兩個指標。

根據之前接入React Router的SDK,可以藉由監聽location參數在路由切換、新路由組件掛載的時候觸發邏輯,所以我們可以在這時執行onLCP onFCP

    reactRouterMetric(RoutesComponent) {
        return ({ children }) => {
            const location = useLocation();
            useEffect(() => {
                onLCP((metric) => this._reportWebVitals('LCP', metric));
                onFCP((metric) => this._reportWebVitals('FCP', metric));
            }, [location]);

            return <RoutesComponent>{children}</RoutesComponent>;
        };
    }

    _reportWebVitals(type, metric) {
        const metricInfo = {
            type: type,
            value: metric.value,
            delta: metric.delta,
            id: metric.id,
        };
        console.log('metricInfo:', metricInfo);
        // TODO: send to monitor server
    }

可以看到,我們在路由切換的時候,console有顯示該頁面的LCPFCP這兩個指標。

image

小結

透過本文,我們了解到 Sentry 如何在 React Router 路由切換時監測並獲取 Web Vitals 指標、監測網頁性能;然後我們也自己demo了獲取 LCPFCP兩個指標,成功console出來~

接下來,會嘗試利用Sentry來監測後端服務。

ref

ChangeLog

  • 20240923--補內文與小結
  • 20240919--初稿

上一篇
Day08--Sentry是如何獲取效能指標(上)---react-router
下一篇
Day10--後端服務與Sentry---以NodeJS為例
系列文
全端監控技術筆記---從Sentry到Opentelemetry30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言